<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="标题" prop="blogTitle">
        <Input v-model="formValidate.blogTitle" placeholder="请输入标题"></Input>
      </FormItem>
    <FormItem label="作者" prop="blogAuthor">
      <Input v-model="formValidate.blogAuthor" placeholder="请输入作者名"></Input>
    </FormItem>
    <FormItem label="摘要" prop="blogAbstract">
        <Input v-model="formValidate.blogAbstract" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入摘要"></Input>
      </FormItem>
    <FormItem label="文章类型" prop="typeId">
        <Select v-model="formValidate.typeId" placeholder="请选择类型">
          <Option v-for="item in types" :value="item.typeId" :key="item.typeId">{{ item.typeName }}</Option>
        </Select>
      </FormItem>
    <FormItem label="上传" prop="blogCover">
      <Upload type="drag" name="file" ref="upload" :default-file-list="fileList"
        action="http://47.98.183.130:8080/upload/cover/qiniu" :before-upload="clearUploadedImage">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>Click or drag files here to upload</p>
        </div>
      </Upload>
    </FormItem>
      <FormItem label="推荐置顶" prop="recommendSwitch">
        <Row>
          <Col span="2">
            <FormItem>
              <i-switch v-model="formValidate.recommendSwitch" true-value="1" false-value="0" size="large">
                <span slot="open">推荐</span>
                <span slot="close">不推荐</span>
              </i-switch>
            </FormItem>
          </Col>
          <Col span="2">
            <FormItem>
              <i-switch v-model="formValidate.topSwitch" true-value="1" false-value="0" size="large">
                <span slot="open">置顶</span>
                <span slot="close">不置顶</span>
              </i-switch>
            </FormItem>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="正文">
        <mavon-editor v-model="formValidate.blogContext" ref=md @imgAdd="imgAdd"></mavon-editor>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
        <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
      </FormItem>
    </Form>
</template>

<script>
import { getTypeList } from '@/api/blog/types'
import { getById } from '@/api/blog/data'
import { save } from '@/api/blog/save'
import axios from 'axios'
export default {
  name: 'blog_add',
  data () {
    return {
      content: '',
      types: [],
      formValidate: {
        blogId: '',
        blogTitle: '',
        blogAbstract: '',
        typeId: '',
        blogAuthor: '',
        recommendSwitch: 0,
        topSwitch: 0,
        blogContext: ''
      },
      ruleValidate: {
        blogTitle: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        blogAbstract: [
          { required: true, message: '请输入摘要', trigger: 'blur' },
          { type: 'string', min: 5, message: 'Introduce no less than 5 words', trigger: 'blur' }
        ],
        typeId: [
          { type: 'number', required: true, message: '请选择文章类型', trigger: 'change' }
        ],
        blogAuthor: [
          { required: true, message: '请输入作者名', trigger: 'blur' }
        ]
      },
      fileList: []
    }
  },
  methods: {
    clearUploadedImage () {
      this.$refs.upload.clearFiles()
    },
    imgAdd (pos, file) {
      let formdata = new FormData()
      formdata.append('file', file)
      let _this = this
      axios({
        url: 'http://47.98.183.130:8080/upload/img/qiniu',
        method: 'post',
        data: formdata,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        if (res.data.code === 1) {
          _this.$refs.md.$img2Url(pos, res.data.src)
        }
      })
    },
    handleSubmit (name) {
      console.log(this.formValidate.typeId)
      this.$refs[name].validate((valid) => {
        if (valid) {
          save(this.formValidate).then(res => {
            this.$Message.success('提交成功!')
          })
        } else {
          this.$Message.error('提交失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  },
  mounted () {
    let _this = this
    getTypeList().then(res => {
      _this.types = res.list
    })
    let blogId = _this.$route.params.blogId
    if (blogId != null) {
      getById(blogId).then(res => {
        _this.formValidate = res.info
        let fileObj = {name: res.info.blogCover, url: res.info.blogCover}
        _this.fileList.push(fileObj)
      })
    }
  }
}
</script>

<style>

</style>
